<template>
  <div class="loan-list-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" ref="searchFormRef">
        <el-form-item label="贷款编号" prop="loanNo">
          <el-input v-model="searchForm.loanNo" placeholder="请输入贷款编号" clearable />
        </el-form-item>
        <el-form-item label="客户姓名" prop="customerName">
          <el-input v-model="searchForm.customerName" placeholder="请输入客户姓名" clearable />
        </el-form-item>
        <el-form-item label="贷款状态" prop="status">
          <el-select v-model="searchForm.status" placeholder="请选择贷款状态" clearable>
            <el-option label="申请中" :value="1" />
            <el-option label="审批中" :value="2" />
            <el-option label="已放款" :value="3" />
            <el-option label="已结清" :value="4" />
            <el-option label="已拒绝" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期" prop="applyDate">
          <el-date-picker
            v-model="searchForm.applyDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <div class="table-operations">
        <el-button type="primary" @click="handleAdd">新增贷款</el-button>
        <el-button type="success" @click="handleExport">导出数据</el-button>
      </div>

      <el-table :data="tableData" border stripe v-loading="loading">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="loanNo" label="贷款编号" min-width="120" />
        <el-table-column prop="customerName" label="客户姓名" width="100" />
        <el-table-column prop="customerPhone" label="联系电话" width="120" />
        <el-table-column prop="productName" label="贷款产品" width="120" />
        <el-table-column prop="amount" label="贷款金额" width="120" align="right">
          <template #default="{ row }">
            {{ row.amount.toLocaleString() }}元
          </template>
        </el-table-column>
        <el-table-column prop="term" label="贷款期限" width="100" align="center">
          <template #default="{ row }">
            {{ row.term }}个月
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="年化利率" width="100" align="center">
          <template #default="{ row }">
            {{ row.rate }}%
          </template>
        </el-table-column>
        <el-table-column prop="status" label="贷款状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getLoanStatusType(row.status)">
              {{ getLoanStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="applyDate" label="申请日期" width="120" align="center" />
        <el-table-column prop="approvalDate" label="审批日期" width="120" align="center" />
        <el-table-column label="操作" width="220" align="center" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleView(row)">查看</el-button>
            <el-button type="primary" link @click="handleEdit(row)" v-if="row.status === 1">编辑</el-button>
            <el-button type="success" link @click="handleApprove(row)" v-if="row.status === 2">审批</el-button>
            <el-button type="warning" link @click="handleRepayment(row)" v-if="row.status === 3">还款</el-button>
            <el-button type="danger" link @click="handleCancel(row)" v-if="row.status === 1 || row.status === 2">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      title="贷款详情"
      v-model="detailVisible"
      width="800px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="贷款编号">{{ detail.loanNo }}</el-descriptions-item>
        <el-descriptions-item label="贷款状态">
          <el-tag :type="getLoanStatusType(detail.status)">
            {{ getLoanStatusText(detail.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{ detail.customerName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ detail.customerPhone }}</el-descriptions-item>
        <el-descriptions-item label="证件号码">{{ detail.idCard }}</el-descriptions-item>
        <el-descriptions-item label="贷款产品">{{ detail.productName }}</el-descriptions-item>
        <el-descriptions-item label="贷款金额">{{ detail.amount?.toLocaleString() }}元</el-descriptions-item>
        <el-descriptions-item label="贷款期限">{{ detail.term }}个月</el-descriptions-item>
        <el-descriptions-item label="年化利率">{{ detail.rate }}%</el-descriptions-item>
        <el-descriptions-item label="还款方式">{{ getRepaymentMethodText(detail.repaymentMethod) }}</el-descriptions-item>
        <el-descriptions-item label="申请日期">{{ detail.applyDate }}</el-descriptions-item>
        <el-descriptions-item label="审批日期">{{ detail.approvalDate }}</el-descriptions-item>
        <el-descriptions-item label="放款日期">{{ detail.loanDate }}</el-descriptions-item>
        <el-descriptions-item label="到期日期">{{ detail.dueDate }}</el-descriptions-item>
        <el-descriptions-item label="贷款用途" :span="2">{{ detail.purpose }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ detail.remark }}</el-descriptions-item>
      </el-descriptions>

      <template v-if="detail.status === 3 || detail.status === 4">
        <div class="repayment-plan-title">还款计划</div>
        <el-table :data="detail.repaymentPlan || []" border stripe>
          <el-table-column type="index" label="期数" width="60" align="center" />
          <el-table-column prop="dueDate" label="还款日期" width="120" align="center" />
          <el-table-column prop="amount" label="还款金额" width="120" align="right">
            <template #default="{ row }">
              {{ row.amount.toLocaleString() }}元
            </template>
          </el-table-column>
          <el-table-column prop="principal" label="本金" width="120" align="right">
            <template #default="{ row }">
              {{ row.principal.toLocaleString() }}元
            </template>
          </el-table-column>
          <el-table-column prop="interest" label="利息" width="120" align="right">
            <template #default="{ row }">
              {{ row.interest.toLocaleString() }}元
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="row.status === 1 ? 'success' : row.status === 0 ? 'warning' : 'danger'">
                {{ row.status === 1 ? '已还款' : row.status === 0 ? '待还款' : '已逾期' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="payDate" label="实际还款日期" min-width="120" align="center" />
        </el-table>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

// 搜索表单
const searchForm = reactive({
  loanNo: '',
  customerName: '',
  status: '',
  applyDate: []
})

// 表格数据
const loading = ref(false)
const tableData = ref([
  {
    id: 1,
    loanNo: 'DK20240320001',
    customerName: '张三',
    customerPhone: '13800138000',
    idCard: '110101199001011234',
    productName: '个人消费贷款',
    amount: 50000,
    term: 12,
    rate: 4.35,
    repaymentMethod: 1,
    status: 3,
    applyDate: '2024-03-20',
    approvalDate: '2024-03-21',
    loanDate: '2024-03-22',
    dueDate: '2025-03-22',
    purpose: '个人消费',
    remark: '',
    repaymentPlan: [
      {
        dueDate: '2024-04-22',
        amount: 4269.61,
        principal: 4052.95,
        interest: 216.66,
        status: 1,
        payDate: '2024-04-20'
      },
      {
        dueDate: '2024-05-22',
        amount: 4269.61,
        principal: 4070.52,
        interest: 199.09,
        status: 1,
        payDate: '2024-05-21'
      },
      {
        dueDate: '2024-06-22',
        amount: 4269.61,
        principal: 4088.16,
        interest: 181.45,
        status: 0,
        payDate: ''
      }
    ]
  },
  {
    id: 2,
    loanNo: 'DK20240320002',
    customerName: '李四',
    customerPhone: '13900139000',
    idCard: '110101199002022345',
    productName: '小微企业贷款',
    amount: 200000,
    term: 24,
    rate: 5.85,
    repaymentMethod: 1,
    status: 2,
    applyDate: '2024-03-20',
    approvalDate: '',
    loanDate: '',
    dueDate: '',
    purpose: '企业经营',
    remark: '',
    repaymentPlan: []
  }
])

// 分页
const page = reactive({
  current: 1,
  size: 10,
  total: 2
})

// 详情数据
const detailVisible = ref(false)
const detail = ref({})

// 搜索
const handleSearch = () => {
  // TODO: 调用搜索接口
  console.log('搜索条件:', searchForm)
}

// 重置
const handleReset = () => {
  searchForm.loanNo = ''
  searchForm.customerName = ''
  searchForm.status = ''
  searchForm.applyDate = []
  handleSearch()
}

// 新增贷款
const handleAdd = () => {
  router.push('/loan/apply')
}

// 导出数据
const handleExport = () => {
  ElMessage.success('导出成功')
}

// 查看详情
const handleView = (row) => {
  detail.value = { ...row }
  detailVisible.value = true
}

// 编辑
const handleEdit = (row) => {
  ElMessage.info('编辑功能开发中')
}

// 审批
const handleApprove = (row) => {
  ElMessage.info('审批功能开发中')
}

// 还款
const handleRepayment = (row) => {
  ElMessage.info('还款功能开发中')
}

// 取消
const handleCancel = (row) => {
  ElMessageBox.confirm(
    '确认要取消该贷款申请吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('取消成功')
  }).catch(() => {})
}

// 分页
const handleSizeChange = (val) => {
  page.size = val
  handleSearch()
}

const handleCurrentChange = (val) => {
  page.current = val
  handleSearch()
}

// 获取贷款状态文本
const getLoanStatusText = (status) => {
  const statusMap = {
    1: '申请中',
    2: '审批中',
    3: '已放款',
    4: '已结清',
    5: '已拒绝'
  }
  return statusMap[status] || '未知状态'
}

// 获取贷款状态标签类型
const getLoanStatusType = (status) => {
  const typeMap = {
    1: 'info',
    2: 'warning',
    3: 'success',
    4: 'success',
    5: 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取还款方式文本
const getRepaymentMethodText = (method) => {
  const methodMap = {
    1: '等额本息',
    2: '等额本金',
    3: '先息后本',
    4: '一次性还本付息'
  }
  return methodMap[method] || '未知方式'
}
</script>

<style scoped>
.loan-list-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.table-operations {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.repayment-plan-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0 10px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}
</style>
